<template>
  <div ref="network" class="network"></div>
</template>

<script>
  import vis from "vis";

  export default {
    mounted () {
      var nodes = null;
      var edges = null;
      var network = null;

      function destroy() {
        if (network !== null) {
          network.destroy();
          network = null;
        }
      }

      var that = this;
      function draw() {
        destroy();
        nodes = [];
        edges = [];
        var json = [
          {
          	id: 0,
            label: "易联众",
            parentId: undefined,
            level: 0,
            shape: "box"
          },
          {
          	id: 1,
            label: "厦门市中山医院",
            parentId: 0,
            level: 1,
            shape: "box"
          },
          {
            id: 2,
            label: "厦门市老人医院",
            parentId: 0,
            level: 1,
            shape: "box"
          },
          {
            id: 3,
            label: "厦门市第一医院",
            parentId: 0,
            level: 1,
            shape: "box"
          },
          {
            id: 4,
            label: "服务器A\nIP:10.20.0.249\n状态：运行中",
            parentId: 1,
            level: 2,
            shape: "box"
          },
          {
            id: 5,
            label: "服务器B\nIP:10.20.0.249\n状态：运行中",
            parentId: 1,
            level: 2,
            shape: "box"
          },
          {
            id: 6,
            label: "服务器C\nIP:10.20.0.249\n状态：已暂停",
            parentId: 2,
            level: 2,
            shape: "box"
          },
          {
            id: 7,
            label: "服务器D\nIP:10.20.0.249\n状态：已暂停",
            parentId: 2,
            level: 2,
            shape: "box"
          },
          {
            id: 8,
            label: "服务A",
            parentId: 4,
            level: 3,
            shape: "box"
          },
          {
            id: 9,
            label: "服务B",
            parentId:4,
            level: 3,
            shape: "box"
          }
        ];

        nodes = json;
        nodes.forEach(function (item) {
        	edges.push({from: item.parentId, to: item.id})
        });

        // create a network
        var container = that.$refs.network;
        var data = {
          nodes: nodes,
          edges: edges
        };

        var options = {
          edges: {
            smooth: {
              type: 'cubicBezier',
              forceDirection: 'vertical',
              roundness: 1
            }
          },
          layout: {
            hierarchical: {
              direction: 'UD',
              nodeSpacing: 130
            }
          },
          interaction: {
            zoomView: false,
            dragNodes: false
          },
          physics: false
        };
        network = new vis.Network(container, data, options);
      }

      draw();
    }
  }
</script>

<style scoped>
  .network {
    width: 100%;
    height: 600px;
    /*border: 1px solid lightgray;*/
  }
</style>

